<template>
  <!-- 工作流机构用户页面 -->
  <div>
    <el-row class="currencyManage container">
      <el-col style="margin-right: 10px" class="content-left">
        <el-row class="handleBox">
          <el-col :span="18">
            <h3>用户列表</h3>
            <el-button @click="reassign()">确定</el-button>
            <el-button @click="close()">关闭</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          max-height="250px;"
          @row-click="authorizeFor"
        >
          <el-table-column width="55" type="selection"  />
          <el-table-column prop="userName" label="用户名" />
          <el-table-column prop="realName" label="姓名 " />

          <el-table-column prop="org.orgName" label="所属机构 " />
        </el-table>
        <!-- <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-size="15"
          :total="400"
        ></pagination> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { workflow } from '@/api/index'
export default {
  components: {},
  data() {
    return {
      addOrEdit: false, // 新增/编辑/查看弹窗
      checkList: [],
      // 列隐藏
      textData: [{ label: '用户名' }, { label: '姓名' }, { label: '所属机构' }],
      // 获取table的数据
      tableData: []
    }
  },
  computed: {
    columnState() {
      const arr = []
      const arr1 = this.textData
      const arr2 = this.checkList
      for (let i = 0; i < arr1.length; i++) {
        let flg = false
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true
          }
        }
        arr.push(flg)
      }
      return arr
    }
  },
  watch: {},
  created() {
    this.checkListInit()
  },
  mounted() {
  },
  methods: {
    // 查询列表
    init(row, forward) {
      const data = {
        modelId: row.modelId,
        taskId: row.taskInstanceId,
        forward: forward
      }
      workflow.queryUserForCandidate(data).then((res) => {
        if (res.code === 200) {
          this.tableData = res.datas
        }
      })
    },
    // 处理搜索机构框点击选中隐藏,鼠标悬停提示
    checkListInit() {
      this.checkList = this.textData.map((v) => {
        return v.label
      })
    },
    reassign() {
      const selection = this.$refs.multipleTable.selection
      if (selection.length < 1) {
        return this.$message.warning('请选择数据')
      }
      const row = selection
      this.$emit('approverEvent', row)
      //
    },
    close() {
      this.$emit('approverClose', '')
    },
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection()
      }
      this.$refs.multipleTable.toggleRowSelection(row, true)
    },
    authorizeForOrg(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTableOrg.clearSelection()
      }
      this.$refs.multipleTableOrg.toggleRowSelection(row, true)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 380px;
  margin-bottom: 20px;
  .tableTop {
    margin-bottom: 20px;
  }
  h3 {
    line-height: 30px;
  }
}
</style>
